<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超市商品溯源管理系统</title>
    <meta name="description" content="超市商品溯源管理系统，提供完整的商品追踪、质量管理和数据分析功能">
    <meta name="keywords" content="商品溯源,质量管理,供应链,食品安全,超市管理">
    <meta name="author" content="超市商品溯源管理系统">
    
    <!-- iOS -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="溯源管理">
    <link rel="apple-touch-icon" href="favicon.svg">
    
    <!-- Android -->
    <meta name="theme-color" content="#2563eb">
    <link rel="manifest" href="manifest.json">
    
    <!-- 图标 -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    
    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- 防止页面闪烁 -->
    <style>
        #app {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #2563eb;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .loading-text {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载系统...</div>
    </div>
    <div id="app"></div>
    
    <script>
        // 检测浏览器兼容性
        if (!window.Promise || !window.fetch) {
            alert('您的浏览器版本过低，请升级到最新版本以获得最佳体验。');
        }
        
        // 全局错误处理
        window.addEventListener('error', function(event) {
            console.error('全局错误:', event.error);
        });
        
        // 网络状态监听
        window.addEventListener('online', function() {
            console.log('网络已连接');
        });
        
        window.addEventListener('offline', function() {
            console.log('网络已断开');
        });
    </script>
    
    <script type="module" src="/src/main.js"></script>
</body>
</html>